はじめに

Webアプリケーションの回帰テストを自動化する際、適切なツールの選択は品質保証とチームの生産性に大きく影響します。

プロジェクト背景

KINTOテクノロジーズ（以下、KTC）では、これまでAutify NoCodeWebを活用して回帰テストの自動化を進め、品質保証体制を構築してきました。Autify NoCodeWebのノーコードプラットフォームは、QA専任メンバーが中心となってテスト自動化を迅速に導入する上で非常に有効であり、多くの成果を上げてきました。
しかし、プロジェクトの成長に伴い、新たな課題も見えてきました:

• より高速なテスト実行が求められるようになった
• CSVファイルの編集・アップロードなど、複雑なファイル操作を伴うテストシナリオの増加
• データ駆動テストによる大量のテストパターンの実行ニーズ
• エンジニアチームの拡大により、コードベースのテスト資産の管理が可能になった

このような背景から、現在のKTCの体制と要件に最適なツールを再検討する必要が生じました。本記事では、これまでお世話になってきたAutify NoCodeWebと、新たな選択肢としてのPlaywrightを、実際の回帰テストシナリオにおいて詳細に比較します。
どちらのツールも優れた特徴を持っており、組織の状況によって最適な選択は異なります。本記事が、皆様のツール選定の一助となれば幸いです。

ツール概要

Playwright

• 開発元: Microsoft
• タイプ: オープンソースのE2Eテストフレームワーク
• 対応言語: JavaScript/TypeScript、Python、.NET、Java
  対応ブラウザ:
  • PC：Chromium（Chrome、Edge）、Firefox、WebKit（Safari相当）
  • モバイル：デバイスエミュレーション（Chromium、WebKit）
    　※実機のモバイルブラウザ操作は非対応
• 特徴: コードベースで柔軟性が高く、高速な実行速度

Autify NoCodeWeb

• 開発元: オーティファイ株式会社（日本企業）
• タイプ: ノーコードAI搭載テスト自動化プラットフォーム
• 対応ブラウザ:
  • PC：Chrome、Edge、Firefox、Safari（WebKit）
  • モバイル：iOS、Android
• 特徴: 操作をレコーディングしてテストシナリオを作成、AI による要素認識と自動修復機能

ツール選択のためのデシジョンフローチャート

自社に最適なツールを選ぶ際の判断フローを視覚化しました。このフローチャートを参考に、組織の状況に応じた選択を行ってください。

フローチャートの使い方

このデシジョンフローは、以下の優先順位で判断することを推奨しています：

• チーム構成の確認: まず、開発チームにプログラミング可能なエンジニアがいるかを確認します。エンジニアリソースが限られている場合は、Autify NoCodeWebが最適な選択となります。
• 実行速度の重視度: エンジニアがいる場合、次に実行速度の重要性を評価します。CI/CDパイプラインでの高速フィードバックが重要な場合、Playwrightが適しています。
• 詳細要件の評価: 実行速度がそれほど重要でない場合は、具体的なテスト要件に基づいて判断します：

• ハイブリッドアプローチの検討: 上記の要件が混在している場合、両ツールを併用するハイブリッドアプローチも有効な選択肢です。

機能別詳細比較

1. CSVの編集とアップロード

Playwrightの場合:

input[type="file"] 要素に対してsetInputFiles() メソッドを使用することで、CSVファイルのアップロードが柔軟に実装できます。また、ファイルの動的生成やデータ駆動テストとの組み合わせも可能です。コードベースの利点を活かし、複雑なファイル操作シナリオに対応できます。

Autify NoCodeWebの場合:

基本的なファイルアップロード機能は提供されていますが、複雑なCSV編集を伴うシナリオには制約があります。シンプルなファイルアップロードであれば、ノーコードで簡単に実装できる点は大きなメリットです

2. 特定ファイルのWebページからのダウンロード

Playwrightの場合:

page.waitForEvent('download') を使用してダウンロードイベントを捕捉し、ファイル名や内容の検証まで完全に制御できます。ダウンロードしたファイルの内容を自動的に検証するシナリオも実装可能です

Autify NoCodeWebの場合:

ダウンロード操作の記録と実行は可能です。基本的なダウンロード動作の確認には十分対応しており、ノーコードで実装できる利点があります。より詳細なファイル検証が必要な場合は、他の手段との組み合わせを検討する必要があります。

3. 特定ステップのスクリーンショット

Playwrightの場合:

page.screenshot() やlocator.screenshot() を使用して、任意のタイミングで全画面または特定要素のスクリーンショットを取得できます。保存先やファイル名も自由に設定可能で、細かい制御が必要な場合に優れています

Autify NoCodeWebの場合:

全てのテストステップで自動的にスクリーンショットが撮影されるため、設定の手間が不要です。テスト失敗時の原因調査が容易になり、特にテスト自動化に不慣れなメンバーでも、確実に証跡を残せる点が優れています。

4. 画面上の文字状態の判断

Playwrightの場合:

expect(locator).toHaveText() 、toContainText() 、toBeVisible() など、豊富なアサーションメソッドで文字列の存在、内容、表示状態を詳細に検証できます。正規表現による柔軟なパターンマッチングも可能で、複雑な検証ロジックに対応できます。

Autify NoCodeWebの場合:

テキストの存在確認や表示状態の検証が可能です。特にAIによる要素認識により、画面デザインが変更されても同じテキスト要素を識別できる点が優れています。HTMLの細かい変更に強く、メンテナンスコストを削減できます

5. データ駆動テストの循環使用

Playwrightの場合:

テストデータを配列やCSVファイルから読み込み、test.describe() やforループを使用して複数のデータセットで同じテストロジックを実行できます。テストの再利用性が非常に高く、大量のテストパターンを効率的に実行できます。

   // CSVファイルからデータを読み込む
    testData = await readCSV('C:\\××××××××\\testData4.csv');
   
    for (const data of testData) {
      const {
        password,
        surname,
        katakanaSurname,
        yearOfBirth,
        monthOfBirth,
        dayOfBirth,
        sex,
        postCode1,
        postCode2,
        cellphoneNumber1,
        cellphoneNumber2,
        cellphoneNumber3,
        typeOfHousing,
        yearsOfResidence,
        numberOfPeople1,
        numberOfPeople2,
        annualIncome,
        purposeOfUser,
        licenseNumber,
        route,
        fileName,
        profession,
        corporateName,
        positionOfCorporateName,
        nameOfCorporate,
        katakanaNameOfCorporate,
        department,
        postCodeOfCorporate1,
        postCodeOfCorporate2,
        cellphoneNumberOfCorporate1,
        cellphoneNumberOfCorporate2,
        cellphoneNumberOfCorporate3,
        lengthOfWork
      } = data;

Autify NoCodeWebの場合:

個別のテストシナリオを作成することで、複数のパターンに対応できます。ノーコードで各シナリオを管理できるため、プログラミングの知識がなくても運用可能な点がメリットです。ただし、データ量が多い場合はシナリオ数が増加します。

6. 異なる画面間の切り替え

Playwrightの場合:

複数タブ、複数ウィンドウ、iframe間の切り替えを完全にサポートしています。page.context().pages() で全ページを取得したり、page.waitForEvent('popup') で新しいページを待機することができます。複雑な画面遷移ロジックも実装可能です。

Autify NoCodeWebの場合:

画面遷移やタブ切り替えの操作を記録・実行できます。基本的な画面間の移動には十分対応しており、ノーコードで実装できる利点があります。

7. 外部メール内容の確認（URLのクリックなど）

Playwrightの場合:

メールテストAPIサービス（例：MailSlurp、Mailinator）と連携してメール内容を取得し、URLを抽出してナビゲーションすることが可能です。柔軟な連携が可能ですが、追加の実装とAPI費用が必要になる場合があります。

Autify NoCodeWebの場合:

メール検証機能がプラットフォームに組み込まれており、追加の設定や実装なしでメール内のリンクをクリックしたり、内容を確認したりできます。この統合機能は大きな強みであり、特に非エンジニアのQAメンバーでも簡単に利用できる点が優れています。

8. XPathなどによる頻繁に変動する要素のロケート

Playwrightの場合:

CSS Selector、XPath、text、roleなど、多様なロケーター戦略をサポートしています。複数のロケーターを組み合わせたり、厳密な条件指定が可能で、動的要素に対しても高い精度で特定できます。

            # ENT番号取得
            xpath1 = '//*[@id="app"]/div/main/div/div[1]/div[1]/div[2]/div/div[3]/div[1]'
            display_text1 = (await page.locator(f'xpath={xpath1}').text_content() or '').strip()
            last1 = display_text1[-5:]
            shinsa_number = '97016QAP00' + last1

            # メールアドレス取得
            xpath2 = '//*[@id="app"]/div/main/div/div[1]/div[1]/div[2]/div/div[7]/div[2]'
            display_text2 = (await page.locator(f'xpath={xpath2}').text_content() or '').strip()

            # 名前取得
            xpath0 = '//*[@id="app"]/div/main/div/div[1]/div[1]/div[2]/div/div[7]/div[1]/a'
            display_text0 = (await page.locator(f'xpath={xpath0}').text_content() or '').strip()
            lastname = display_text0[4:]

Autify NoCodeWebの場合:

AIによる要素認識を採用しており、HTMLが変更されても要素を識別しようとします。この機能は画面の小規模な変更に対して非常に強く、手動でのメンテナンスを大幅に削減できます。特にデザイン調整が頻繁に行われる開発フェーズでは、この自動修復機能が大きな価値を発揮します。複雑な動的要素については、認識精度を確認しながら運用することが推奨されます。
そして、Javascriptによって要素の指定も簡単にできます。

            function getEmailInputValue() {
              var selector = "#__next > main > div > div > div.o-emailPasswordForm > div > div.m-inputField > div:nth-child(1) > div > div.m-inputField__container > div > div > input[type=email]";
              var element = document.querySelector(selector);
              if (!element) {
                throw new Error("Error: cannot find the element with selector(" + selector + ").");
              }
              return element.value;
            }

            // 実行例
            console.log(getEmailInputValue());

9. 画面の比較（ビジュアルリグレッションテスト）

Playwrightの場合:

toHaveScreenshot() メソッドでピクセルレベルの画面比較が可能です。差分の許容範囲を設定したり、特定領域をマスクしたりできます。細かい視覚的変更の検出に優れており、意図しないUI変更を確実に捉えます

Autify NoCodeWebの場合:

画面全体の変更を検出し、AIが変更箇所を識別します。特に大規模なデザイン変更時には、変更点の確認とテストシナリオの更新が比較的容易です。AIによる変更の影響分析機能により、どのテストシナリオを更新すべきかの判断がしやすく、大規模リニューアル時のメンテナンス工数を削減できる点が優れています。

10. スクリプトの実装難易度

Playwrightの場合:

JavaScript/TypeScriptなどのプログラミング言語とテストフレームワークの知識が必要です。習得には一定の時間がかかりますが、公式ドキュメントが充実しており、コミュニティも活発です。エンジニアチームが確立されている組織に適しています。

Autify NoCodeWebの場合:

ブラウザ操作を記録するだけでテストシナリオが作成できるため、プログラミング経験がない非エンジニアでも容易に使用できます。この実装の容易さは、Autify NoCodeWebの最大の強みの一つです。QA専任メンバーが主体となってテスト自動化を推進できるため、エンジニアリソースが限られている組織や、迅速にテスト自動化を開始したい場合に特に有効です。

11. スクリプトの修正難易度

Playwrightの場合:

テキストエディタでスクリプトを直接編集できるため、小規模な修正は数秒で完了します。バージョン管理システム（Git）との親和性も高く、差分確認やロールバックが容易です。複数人での並行開発やコードレビュー文化とも相性が良いです。

Autify NoCodeWebの場合:

GUI上で操作を再記録するか、手動で修正する必要があります。ただし、AIによる自動修復機能により、画面の小規模な変更には自動的に対応されるため、実際の修正作業は最小限に抑えられます。この自動修復機能は、メンテナンスコストの削減に大きく貢献します。

12. スクリプトの実行速度

Playwrightの場合:

ヘッドレスモードでの実行やネットワークリクエストの最適化により、非常に高速なテスト実行が可能です。並列実行にも標準対応しており、大規模なテストスイートでも短時間で完了します。

Autify NoCodeWebの場合:

クラウドベースのプラットフォームであり、ネットワークレイテンシーや処理のオーバーヘッドにより、Playwrightと比較して実行速度が遅くなる傾向があります。ただし、実際の速度差はテストケースの複雑さ、ネットワーク環境、Autify NoCodeWebのサーバー負荷などの要因によって大きく変動する可能性があります。大規模なテストスイートでは実行時間が増加する可能性がありますが、並列実行機能を活用することで全体の実行時間を最適化できます。

追加の比較ポイント

📊 要約比較表

1. コストと導入障壁

Playwright:

• 完全無料のオープンソース
• 学習コストは必要だが、長期的なランニングコストはゼロ
• CI/CD環境への組み込みも容易
• エンジニアチームの人件費は考慮が必要

Autify NoCodeWeb:

• サブスクリプション型の有料サービス
• 初期導入が簡単で、迅速にテスト自動化を開始できる
• テストシナリオ数や実行回数に応じた費用体系
• インフラ管理コストが不要
• エンジニアリソースが限られている場合、トータルコストで優位性がある場合も

2.チーム構成との適合性

Playwrightが適しているチーム:

• エンジニア主導のQA体制が整っている
• コードレビュー文化が定着している
• 複雑なテストロジックや高度なカスタマイズが必要
• Git等のバージョン管理システムを活用している

Autify NoCodeWebが適しているチーム:

• QA専任メンバーが中心（プログラミング経験が少ない）
• エンジニアリソースが限られている
• 迅速にテスト自動化を開始したい
• メンテナンスコストを抑えたい（AIによる自動修復活用）
• ノーコードでテスト資産を管理したい

3. CI/CD統合

Playwright:

• GitHub Actions、GitLab CI、Jenkins など主要CI/CDツールとの統合が容易
• テスト結果のレポート生成、アーティファクト保存が柔軟
• 並列実行、シャーディングなど高度な実行戦略が可能
• 開発フローに深く統合できる

Autify NoCodeWeb:

• APIを介したCI/CD統合が可能
• 独自のテスト実行環境を使用
• クラウドベースのため、インフラ管理不要
  CI/CD統合の設定がシンプル

4.メンテナンス性と長期運用

Playwright:

• スクリプトをバージョン管理できる
• リファクタリングやスクリプトの再利用が容易
• コミュニティが活発で、最新のベストプラクティスにアクセスしやすい
• 長期的なスクリプト資産の管理に優れる

Autify NoCodeWeb:

• AIによる要素の自動認識で、画面変更時のメンテナンス工数を削減
• 自動修復機能により、軽微な変更への対応が自動化される
• プラットフォーム上での一元管理が可能
• ノーコードのため、担当者の変更による影響が少ない

それぞれのツールが特に優れているシーン

Playwrightが最適なケース

• 大量のデータパターンテスト: 同一ロジックで数百〜数千パターンのテストデータを処理する必要がある場合
• 高頻度の実行: CI/CDパイプラインで1日に何度もテストを実行し、迅速なフィードバックが必要な場合
• 複雑なファイル操作: CSV編集、複数ファイルの同時アップロード、ダウンロードファイルの内容検証など
• エンジニア主導のQA: 開発チームとQAチームが密接に連携し、テストスクリプトもコードレビューの対象とする場合
• 長期的な資産管理: テストスクリプトをソースコードと同様に管理し、継続的に改善していく場合

Autify NoCodeWebが最適なケース

迅速な導入: プログラミング経験のないQAメンバーが、短期間でテスト自動化を開始したい場合
メール連携テスト: 外部メールの検証を含むシナリオが多い場合
頻繁なUI変更: デザイン調整が頻繁に行われる環境で、AI自動修復機能を活用したい場合
インフラ管理の負担軽減: テスト実行環境の構築・管理リソースが限られている場合
ノーコード資産管理: テスト資産をコード化せず、ビジュアルに管理したい場合
大規模リニューアル: 画面全体の大幅な変更時に、AIによる影響分析と効率的な更新が必要な場合

KTCにおける選択理由

KTCでは、これまでAutify NoCodeWebによって品質保証の基盤を築いてきましたが、プロジェクトの成長と共にいろいろな課題が顕在化しました。（上記のプロジェクト背景で述べた課題）
これら課題を解決する選択肢として、Playwrightを導入することにしました。ただし、これはAutify NoCodeWebを完全に置き換えるものではありません:

Playwrightが担う領域: データ駆動テスト、高速実行が求められるCI/CD統合、複雑なファイル操作を伴うシナリオ
Autify NoCodeWebが引き続き価値を発揮する領域: メール連携テスト、ノーコードで管理すべきシナリオ、QA専任メンバーが主導するテスト

両ツールの強みを活かしたハイブリッドアプローチにより、KTCの品質保証体制をさらに強化していく予定です。

まとめ：どちらを選ぶべきか

Playwrightの主な強み:

• 高速な実行速度
• 柔軟なカスタマイズ性
• 精密な要素制御とデータ駆動テスト
• オープンソースでコストゼロ
• バージョン管理システムとの親和性

Autify NoCodeWebの主な強み:

• ノーコードで実装が容易
• AIによる自動修復でメンテナンスコスト削減
• 統合されたメール検証機能
• 非エンジニアでも運用可能
• インフラ管理不要

最適な選択は、組織の状況によって異なります:

• エンジニアリソースが限られ、迅速にテスト自動化を開始したい → Autify NoCodeWeb
• エンジニアチームが確立され、高度なカスタマイズと高速実行が必要 → Playwright
• 両方のメリットを活かしたい → ハイブリッドアプローチ

どちらのツールも、現代のWebアプリケーション開発において品質を担保するための重要な選択肢です。本記事の比較内容を参考に、自社のチーム構成、スキルセット、プロジェクト要件、予算、長期的な運用計画などを総合的に考慮して、最適なツールを選定してください。
Autifyは世界中で支持されているノーコードテスト自動化プラットフォームであり、特にエンジニアリソースが限られている組織において、品質保証体制を迅速に構築できる優れたソリューションです。KTCも、Autifyのサービスを通じて多くの成果を上げてきました。
今後も、両ツールの進化に注目し、それぞれの強みを最大限に活用していくことが重要です。